{% extends 'myhome/base.html' %}
{% block con %}
<style>
    * {
            margin: 0;
            padding: 0;
        }
    #wrapper {
        width: 1140px;
        height: 430px;
        overflow: hidden;
        margin: 0px auto;
        border: 1px solid #000;
        display: flex;
    }

    .product product-single {
        display: flex;
    }

    #content{
        width: 235px;
        list-style: none;
        text-align: center;
    }

</style>

<title>主页</title>
<div id="home">
    <!-- container -->
    <div class="container">
        <!-- home wrap -->
        <div class="home-wrap">
            <!-- home slick -->
            <div id="home-slick">
                <!-- banner -->
                <div class="banner banner-1">
                    <img src="/static/myhome/assets/img/banner01.jpg" alt="">
                </div>
                <!-- /banner -->
                <!-- banner -->
                <div class="banner banner-1">
                    <img src="/static/myhome/assets/img/banner02.jpg" alt="">
                </div>
                <!-- /banner -->

                <!-- banner -->
                <div class="banner banner-1">
                    <img src="/static/myhome/assets/img/banner03.jpg" alt="">
                </div>
                <!-- /banner -->
            </div>
            <!-- /home slick -->
        </div>
        <!-- /home wrap -->
    </div>
    <!-- /container -->
</div>

<div class="section">
    <!-- container -->
    <div class="container">
        <div class="rows">
            <!-- section title -->
                <div class="section-title">
                    <h2 class="title">精品图书</h2>
                </div>

            <div id="wrapper">
                {% for i in book %}
                <div class="colmdsm"  style="width:300px;">
                    <div class="product product-single" id="content">
                        <div class="product-thumb">
                            <button class="main-btn quick-view"><i class="fa fa-search-plus"></i> 快速预览</button>
                            <img src="{{ i.bookimgs_set.first.img_url }}"
                                 style="max-width: 180px; max-height: 250px;" alt="{{i.title}}">
                        </div>
                        <div class="product-body">
                            <h3 class="product-price">￥ {{ i.price }} </h3>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o empty"></i>
                            </div>
                            <h2 class="product-name"><a href="#">{{i.title}}</a></h2>
                            <div class="product-btns">
                                <button class="main-btn icon-btn"><i class="fa fa-heart"></i></button>
                                <button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
                                <button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart"></i> 加入购物车
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="fakeContent" class="product product-single"></div>
                </div>
                {% endfor %}

            </div>
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /section -->
<!-- section -->
<div class="section section-grey">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <!-- banner -->
            <div class="col-md-8">
                <div class="banner banner-1">
                    <img src="/static/myhome/assets/img/banner13.jpg" alt="">
                </div>
            </div>
            <!-- /banner -->

            <!-- banner -->
            <div class="col-md-4 col-sm-6">
                <a class="banner banner-1" href="#">
                    <img src="/static/myhome/assets/img/banner11.jpg" alt="">
                    <div class="banner-caption text-center">
                        <h2 class="white-color">NEW COLLECTION</h2>
                    </div>
                </a>
            </div>
            <!-- /banner -->

            <!-- banner -->
            <div class="col-md-4 col-sm-6">
                <a class="banner banner-1" href="#">
                    <img src="/static/myhome/assets/img/banner12.jpg" alt="">
                    <div class="banner-caption text-center">
                        <h2 class="white-color">NEW COLLECTION</h2>
                    </div>
                </a>
            </div>
            <!-- /banner -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /section -->

<!-- section -->
<div class="section">
    <!-- container -->
    <div class="container">
        <div class="row">
            <!-- section title -->
            <div class="col-md-12">
                <div class="section-title">
                    <h2 class="title"> 猜你喜欢 </h2>
                </div>
            </div>
            <!-- section title -->
            <!-- Product Single -->
            {% for i in books %}
            <div class="col-md-3 col-sm-5 col-xs-5" >
                <div class="product product-single">
                    <div class="product-thumb">
                        <img src="{{ i.bookimgs_set.first.img_url }}"
                             style="max-width: 190px; max-height: 250px;" alt="{{i.title}}">
                    </div>
                    <div class="product-body">
                        <h3 class="product-price">￥ {{ i.price }} </h3>
                        <div class="product-rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o empty"></i>
                            <i class="fa fa-star-o empty"></i>
                        </div>
                        <h2 class="product-name"><a href="#">{{i.title}}</a></h2>
                        <div class="product-btns">
                            <button class="main-btn icon-btn"><i class="fa fa-heart"></i></button>
                            <button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
                            <button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
            <!-- /Product Single -->
        </div>
    </div>
    <!-- /container -->
</div>
<!-- /section -->

<script>
    var content = document.getElementById("content");
    var fakeContent = document.getElementById("fakeContent");
    var wrapper = document.getElementById("wrapper");

    function roll(t) {
        fakeContent.innerHTML = content.innerHTML;
        // 开始无滚动时设为0
        wrapper.scrollTop = 0;
        // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
        var timer = setInterval(rollStart, t);

        // 鼠标移入div时暂停滚动
        wrapper.onmouseover = function() {
            clearInterval(timer);
            timer = null
        };

        // 鼠标移出div后继续滚动
        wrapper.onmouseout = function() {
            timer = setInterval(rollStart, t);
        }
    }
    // 开始滚动函数
    function rollStart() {
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (wrapper.scrollLeft >= content.scrollWidth) {
            wrapper.scrollLeft = 0;
        } else {
            wrapper.scrollLeft++;
        }
    }

    window.onload = roll(50);


</script>

{% endblock %}